<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>简历</title>
    <meta name="viewport" content="width=device-width" />
    <!-- favicon图标 -->
    <link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon" />
    <!-- 51la网站统计 -->
    <script src="./static/js/tongji.js"></script>
    <link rel="stylesheet" href="./static/css/bootstrap-5.2.0.min.css" />
    <link rel="stylesheet" href="./static/css/index.css" />
  </head>

  <body>
    <div class="container-fluid">
      <div id="app" class="container mt-md-5">
        <header class="p-5 text-center">
          <div class="row text-center">
            <h1 class="py-5">RESUMES</h1>
          </div>
          <div class="row head-info justify-content-around">
            <div class="col-lg-auto col-sm-6">
              电话：<a :href="'tel:'+datas.phone">{{datas.phone}}</a>
            </div>
            <div class="col-lg-auto col-sm-6">
              微信：<span id="wechat">{{datas.wechat}}</span>
              <button
                type="button"
                class="btn btn-success rounded-pill btn-sm"
                id="copyBT"
              >
                微信交谈
              </button>
            </div>
            <div class="col-lg-auto col-sm-6">
              QQ：{{datas.qq}}<a
                target="_blank"
                href="http://wpa.qq.com/msgrd?v=3&uin=9066225&site=qq&menu=yes"
                ><img
                  border="0"
                  src="http://wpa.qq.com/pa?p=2:9066225:51"
                  alt="点击这里给我发消息"
                  title="点击这里给我发消息"
              /></a>
            </div>
            <div class="col-lg-auto col-sm-6">
              <a :href="'mailto:'+datas.email" rel="nofollow"
                >邮箱：{{datas.email}}</a
              >
              <a
                target="_blank"
                href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=VjQzNzozPxYnJ3g1OTs"
                style="text-decoration: none"
              >
                <img
                  src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"
                />
              </a>
            </div>
          </div>
        </header>

        <!-- 中间部分 -->
        <main>
          <!-- 在这里加个判断才不会vue报错 -->
          <div class="row px-5 text-center" v-if="!!datas.datas">
            <div id="a1" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a1.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a1.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a2" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a2.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a2.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a3" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a3.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a3.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a4" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a4.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a4.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a5" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a5.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a5.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a6" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a6.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a6.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
            <div id="a7" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
              <div class="module">
                <p>{{datas.datas.a7.title}}</p>
                <a
                  :href="item.path"
                  v-for="(item, index) in datas.datas.a7.res"
                  :key="index"
                  >{{item.name}}</a
                >
              </div>
            </div>
          </div>
        </main>
        <!-- 底部 -->
        <footer class="text-center py-3">
          Copyright &copy; <a href="//zhuanglei.top">zhuanglei</a>
          版权所有.
        </footer>
      </div>
    </div>
  </body>

  <script src="./static/js/jquery-3.2.1.min.js"></script>
  <script src="./static/js/vue-2.6.12.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

  <script>
    // ------------ vue ------------
    Vue.config.productionTip = true; //阻止 vue 在启动时生成生产提示。
    new Vue({
      el: "#app",
      data() {
        return {
          datas: [],
          color: [
            "text-success",
            "text-danger",
            "text-warning",
            "text-info",
            "text-primary",
          ],
        };
      },
      mounted() {
        // ------------ copy ------------
        function copyArticle(event) {
          console.log("1111");
          const range = document.createRange();
          range.selectNode(document.getElementById("wechat"));
          const selection = window.getSelection();
          if (selection.rangeCount > 0) selection.removeAllRanges();
          selection.addRange(range);
          document.execCommand("copy");
          alert("微信号复制成功！");
          console.log("6666");
        }
        document
          .getElementById("copyBT")
          .addEventListener("click", copyArticle, false);

        // ------------ JSON 接收 ------------

        // 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
        const that = this;
        // 使用getjson读取数据;
        $.getJSON("./static/api/data.json", function (data) {
          // 将读取到的json数据赋值给rows
          that.datas = data.content;
          console.log("请求到的数据：", data);
        });

        // ------------ 方法结束 ------------
      },
    });
  </script>
</html>
